<template>
  <div class="chooseMaterials">
    <el-dialog
      width="914px"
      title="选择生产厂家/品牌"
      :visible.sync="dialogFormVisible"
      custom-class="sorting-code-number"
      @opened="initData"
    >
      <div class="el-dialog__body-bodys">
        <div>
          <el-table
            ref="multipleTable"
            max-height="418"
            :data="tableData"
            :row-class-name="tableRowClassName"
            highlight-current-row
            border
            @row-click="rowClick"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column
              prop="manufacturerName"
              label="厂家名称"
              show-overflow-tooltip
            />
            <el-table-column
              prop="brandName"
              label="品牌名称"
              show-overflow-tooltip
            />
          </el-table>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="default-mini" @click="cancel"
          >取 消</el-button
        >
        <el-button size="mini" type="primary-font-mini" @click="confirm"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { throttle } from "@/basa/utils";
import { listSmpBrandRelation } from "../api/orderEntry";
export default {
  props: {
    // row: {
    //   type: Object,
    //   default: () => {}
    // },
    showBtn: {
      type: Boolean,
      default: false
    },
    setContractList: {
      type: Array,
      default: () => []
    },
    setTableList: {
      type: Array,
      default: () => []
    },
    contractCode: String

    // setType: {
    //   type: String,
    //   default: ""
    // }
  },
  data() {
    return {
      setType: "",
      dialogFormVisible: false,
      tableData: [],
      formData: {
        matName: "",
        matnum: "",
        pageNo: 1,
        pageSize: 10,
        catalogId: ""
      },
      total: 1000,
      materialsData: "", // 选择数据
      isTurnPage: false, //是否有翻页
      keyWord: "",

      contractList: [
        { concId: "01", contractName: "钢材" },
        { concId: "02", contractName: "水泥" },
        { concId: "03", contractName: "沥青" },
        { concId: "99", contractName: "其他" }
      ],
      listItemIndex: 1,
      matLessList: [],
      radioSelect: "",
      temp: null,
      requestParams: {},
      rowAll: {},
      multipleSelection: [],
      copyData: []
    };
  },
  watch: {
    contractCode: {
      handler(n) {
        if (n) {
          console.log(
            n,
            "傳入到彈框組件裏了---------------------------------------------"
          );
        }
      },
      immediate: true,
      deep: true
    },
    // row: {
    //   handler(n) {
    //     if (n) {
    //       console.log(n, "传入row");
    //       this.rowAll = n;
    //       this.$nextTick(() => {
    //         this.contractList = [
    //           ...this.contractList.filter(
    //             item => item.concId == n.firstCategoriesOfCode
    //           ),
    //           { concId: "99", contractName: "其他" }
    //         ];
    //         console.log("过滤后左侧菜单", this.contractList);
    //       });
    //     }
    //   },
    //   immediate: true,
    //   deep: true
    // },
    // 获取合同列表
    // setContractList(newVal) {
    //   this.contractList = newVal;
    // },
    // 获取结算单列表
    // setTableList: {
    //   immediate: true,
    //   handler(newVal) {
    //     this.tableData = newVal;
    //   }
    // },

    // 获取当前大类名称
    setType: {
      immediate: true,
      deep: true,
      handler(val, oldval) {
        console.log("当前行数据", val, "old", oldval);
        // this.init(val);
        // console.log('过滤后左侧菜单',this.contractList);
        // this.$nextTick(()=>{
        //   this.contractList = [
        //     ...this.contractList.filter(item => item.concId == val),
        //     { concId: "99", contractName: "其他" }
        //   ];
        //   console.log('过滤后左侧菜单',this.contractList);
        // })
      }
    }
  },
  methods: {
    initData() {
      this.tableData.forEach((item, index) => {
        this.copyData.forEach(_ => {
          if (_.manufacturer === item.manufacturerName + "/" + item.brandName) {
            this.$refs.multipleTable.toggleRowSelection(
              this.tableData[index],
              true
            );
          }
        });
      });
      // this.$refs.multipleTable.toggleRowSelection(this.tableData[index]);
    },
    openDialog() {
      this.dialogFormVisible = true;
      // this.$emit("getVal", "");
    },
    // 切换左侧合同
    init() {
      let params = {
        matLessList: this.matLessList,
        contractCode: this.contractCode
      };
      listSmpBrandRelation(params)
        .then(res => {
          this.tableData = res.data.data;
          if (this.tableData.length === 0) {
            console.log(
              "查找暂无",
              document.getElementsByClassName("el-table__empty-text")
            );
            setTimeout(() => {
              this.$set(
                document.getElementsByClassName("el-table__empty-text")[0],
                "innerHTML",
                "没有相同的生产厂家/品牌，请重新选择"
              );
              document.getElementsByClassName(
                "el-table__empty-text"
              )[0].style.color = "red";
            }, 100);
          }
          // if (!this.tableData) {
          //   document.getElementsByClassName(
          //     "el-table__empty-text"
          //   )[0].innerHTML = "没有相同的生产厂家/品牌，请重新选择";
          // }
        })
        .catch(e => {
          console.log(
            e,
            document.getElementsByClassName("el-table__empty-text")[0].innerHTML
          );

          // // document.getElementsByClassName("el-table__empty-text")[0].innerHTML
          // setTimeout(() => {
          //   this.$set(document.getElementsByClassName("el-table__empty-text")[0],'innerHTML','11111')
          // },100);
          // console.log(e,document.getElementsByClassName("el-table__empty-text")[0].innerHTML);
          // console.log(1111)
          // document.getElementsByClassName("el-table__empty-text")[0].innerHTML =
          //   "没有相同的生产厂家/品牌，请重新选择";
          // document.getElementsByClassName("el-table__empty-text")[0].innerText =
          //   "没有相同的生产厂家/品牌，请重新选择";
          // document.getElementsByClassName("el-table__empty-text")[0].style.color = "red";
          // this.$forceUpdate();
        });
      // this.$emit("autocompleteSelect", val);
    },
    rowClick(row) {
      const isExist = this.multipleSelection.includes(row);
      // if (this.multipleSelection.indexOf(row) === -1){
      //   this.multipleSelection.push(row);
      //
      // } else {
      //   let index = this.multipleSelection.indexOf(row);
      //   this.multipleSelection.splice(index,1);
      //
      // }
      this.handleSelectionChange([row]);
      this.$refs.multipleTable.toggleRowSelection(row, !isExist);
      console.log("选中数组", this.multipleSelection);
    },
    // 每页条数发生改变
    handleSizeChange(val) {
      this.pageNoCode = 1;
      this.getStatementList();
    },
    // 当前页发生改变
    handleCurrentChange(val) {
      this.formData.pageNo = val;
      this.getStatementList();
    },
    // 上一页
    handlePrev() {
      --this.pageNoCode;
      this.getStatementList();
    },
    // 下一页
    handleNext() {
      ++this.pageNoCode;
      this.getStatementList();
    },
    cancel() {
      this.dialogFormVisible = false;
      setTimeout(() => {
        this.handleReset();
      }, 500);
    },
    confirm() {
      console.log("点击确定", this.multipleSelection);
      if (this.multipleSelection.length === 0) {
        return this.$showErrorMessage("未选择数据，请编辑后保存");
      }
      this.$emit("ok", this.multipleSelection, this.rowAll);
      // this.handleReset();
      // this.dialogFormVisible = false;
    },
    handleReset() {
      // this.listItemIndex = 1;
      this.multipleSelection = [];
      this.$refs.multipleTable.clearSelection();
      // this.tableData = [];
    },
    handleSelect(val) {
      this.keyWord = val.contractName;
      this.listItemIndex = val.concId;
      this.$emit("autocompleteSelect", val);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // this.chooseList.
    },
    querySearchAsync: throttle(function(queryString, cb) {
      this.$emit("querySearchAsync", queryString, cb);
    }, 1000),
    handleScrollBottom(data, cb) {
      console.log(">>>>>>>>", data, "<<<<<<<<");
    },
    // 为禁用行添加样式
    tableRowClassName({ row, rowIndex }) {
      if (row.currentAccumulatedunPaiedAmt === 0) {
        return "prohibit";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.chooseMaterials {
  display: inline-block;
}
/deep/ .sorting-code-number {
  .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .el-dialog__body {
    box-sizing: border-box;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 914px;
    .el-dialog__body-bodys {
      height: 100%;
      .bodys-left {
        overflow-x: hidden;
        box-sizing: border-box;
        width: 245px;
        .el-input {
          width: 205px;
        }
        .bodys-left-list {
          padding: 20px;
          .list-item {
            display: flex;
            align-items: center;
            padding-left: 10px;
            padding-right: 5px;
            line-height: 35px;
            font-size: 13px;
            cursor: pointer;
            transition: 0.2s;
            &:hover,
            &.active {
              background-color: #e5f4ff;
              color: #0089ef;
            }
            .item-text {
              padding: 0 10px;
            }
          }
        }
      }
      .bodys-right {
        .el-table {
          .el-radio__label {
            padding-left: 12px;
          }
          .prohibit {
            cursor: not-allowed;
          }
        }
      }
    }
  }
}
.autocomplete-item {
  display: flex;
  align-items: center;
  span {
    padding: 0 10px;
  }
}
.el-table__empty-text {
  line-height: 60px;
  width: 50%;
  color: #909399;
}
</style>
